<!DOCTYPE>
<html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>TABLE转换EXCEL</title>
      <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" ></script>
      <style type="text/css">
        *{padding: 0;margin:0;}
        .btn{
            margin:20px;
        }
        p{
          padding: 0;
          margin:0;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #cccccc;
        }
        td,th {
            padding: 0;
            text-align: center;
        }
        .pure-table {
            border-collapse: collapse;
            border-spacing: 0;
            empty-cells: show;
            /* width: 900px;
            overflow-x: scroll; */
            /* padding:10px 10px; */
            /* border: 1px solid #cbcbcb; */
        }
        /* .pure-table >table{
          width: 1200px;
        } */
        .pure-table caption {
            color: #777;
            /* padding: 1em 0; */
            
            text-align: center;
        }
        .pure-table td,.pure-table th {
            border-left: 1px solid #cccccc;
            border-width: 0 0 0 1px;
            font-size: inherit;
            margin: 0;
            overflow: visible;
            font-size: 11.5px;
            /* padding:5px 10px; */
            /* padding: .5em 1em; */
        }
        .pure-table .header{
          background: #edeff1;
        }
        .pure-table tr td{
          padding:7px 0;
          width: 80px;
        }
        .pure-table .header td{
          padding:5px 0;
          color:#8c8d8d;
        }
        .pure-table td.red{
          color:#dd5360
        }
        .pure-table thead {
            background-color: #e0e0e0;
            color: #000;
            text-align: left;
            vertical-align: bottom;
        }
        .pure-table td {
            background-color: transparent;
        }
        .pure-table-bordered td {
            border-bottom: 1px solid #cccccc;
        }
        .pure-table-bordered tbody>tr:last-child>td {
            border-bottom-width: 0;
        }
        #mark{
          width: 20px;
        }
        .mask{
          background:rgba(0, 0, 0, 0.4);
          position: fixed;
          width: 100%;
          height: 100%;
          overflow: hidden;
          top:0;
          left:0;
          z-index: 100;
          display: none;
        }
        .rfm{
          background: #fff;
          width: 600px;
          height: 650px;
          position: absolute;
          top:50px;
          left: calc(50% - 300px);
          overflow-y: scroll;
        }
        .rfm .close{
          position: absolute;
          right: 10px;
          top: 0px;
          font-size: 23px;
          cursor: pointer;
          color: #6c798a;
        }
        .rfm .rfmDiv{
          padding:20px 30px;
        }
        .rfm .rfmDiv .titleName{
          margin-top:15px;
        }
        .rfm .rfmDiv .titleName span{
          border-bottom:1px solid #F61D70;
          font-size: 13px;
          padding:5px 0;
          color: #333;
        }
        .rfm .rfmDiv .introduce{
          margin-top:20px;
          font-size: 12px;
        }
        .rfm .rfmDiv .introduce p{
          line-height: 20px;
        }
        .rfm .rfmDiv table{
          margin:20px 0;
        }
        .rfm .rfmDiv table tr td{
          width: 100px;
        }
      </style>
    </head>
    <body>
      <input type="button" value="导出" class="btn">
      <div class="mask">
        <div class="rfm">
          <span class="close" title="关闭">×</span>
          <div class="rfmDiv">
            <p class="titleName"><span>RFM模型介绍</span></p>
            <div class="introduce">
              <p>R值:指客户消费最近-次消费和上-次的时间间隔。代表品牌记忆强度和回购周期等。</p>
              <p>F值:指客户在单位时间内的购买次数。代表忠诚度和购买习惯等。</p>
              <p>M值:指客户在单位时间内的购买金额。代表消费能力和产品认可度等。</p>
            </div>
            <div class="pure-table pure-table-bordered">
              <table id = 'testTable' border="1">
                <tr class="header">
                    <td colspan="2">用户类别</td>
                    <td>R【时间】</td>
                    <td>F【频次】</td>
                    <td>M【金额】</td>
                </tr>
                <tr>
                  <td>重要价值用户</td>
                  <td>高消活跃老客</td>
                  <td>高</td>
                  <td>高</td>
                  <td>高</td>
                </tr>
                <tr>
                  <td>一般价值用户</td>
                  <td>底消活跃老客</td>
                  <td>高</td>
                  <td>高</td>
                  <td>高</td>
                </tr>
                <tr>
                  <td>重要发展用户</td>
                  <td>高消新客</td>
                  <td>高</td>
                  <td>高</td>
                  <td>高</td>
                </tr>
                <tr>
                  <td>一般价值用户</td>
                  <td>低消新客</td>
                  <td>高</td>
                  <td>高</td>
                  <td>高</td>
                </tr>
                <tr>
                  <td>重要唤回用户</td>
                  <td>高消陈年老客</td>
                  <td>高</td>
                  <td>高</td>
                  <td>高</td>
                </tr>
                <tr>
                  <td>一般唤回用户</td>
                  <td>低消陈年老客</td>
                  <td>高</td>
                  <td>高</td>
                  <td>高</td>
                </tr>
                <tr>
                  <td>重要挽留用户</td>
                  <td>高消过客</td>
                  <td>高</td>
                  <td>高</td>
                  <td>高</td>
                </tr>
                <tr>
                  <td>流失用户</td>
                  <td>流失用户</td>
                  <td>高</td>
                  <td>高</td>
                  <td>高</td>
                </tr>
              </table>
            </div>
            <p class="titleName"><span>RFM模型介绍</span></p>
            <div class="pure-table pure-table-bordered" style="margin-top:10px;">
                <table id = 'testTable' border="1">
                  <tr class="header">
                      <td>品牌</td>
                      <td>R</td>
                      <td>F</td>
                      <td>M</td>
                  </tr>
                  <tr>
                    <td>CHJ</td>
                    <td>180</td>
                    <td>1</td>
                    <td>5522</td>
                  </tr>
                  <tr>
                    <td>潮汇</td>
                    <td>180</td>
                    <td>1</td>
                    <td>1874</td>
                  </tr>
                  <tr>
                    <td>FION</td>
                    <td>180</td>
                    <td>1</td>
                    <td>1378</td>
                  </tr>
                  <tr>
                    <td>FION</td>
                    <td>180</td>
                    <td>1</td>
                    <td>1378</td>
                  </tr>
                </table>
              </div>
          </div>
        </div>
      </div>

      <div><img id="mark" src="./images/mark.png" alt=""></div>
      <div class="table2excel pure-table pure-table-bordered">
          <table id = 'testTable' border="1">
            <tr class="header">
                <td rowspan="2">用户类别</td>
                <td colspan="6" >对比分析</td>
                <td colspan="5">2019-12-01 至 2020-11-30</td>
                <td colspan="5">2019-12-01 至 2020-11-30</td>
            </tr>
            <tr class="header">
              <td>人数变化(人)</td>
              <td>金额变化(万元)</td>
              <td>客单变化(元)</td>
              <td>人数同比(%)</td>
              <td>金额同比(%)</td>
              <td>客单价同比(%)</td>

              <td>人数(人)</td>
              <td>金额(万元)</td>
              <td>客单价(元)</td>
              <td>人数同比(%)</td>
              <td>金额同比(%)</td>

              <td>人数(人)</td>
              <td>金额(万元)</td>
              <td>客单价(元)</td>
              <td>人数同比(%)</td>
              <td>金额同比(%)</td>
            </tr>
            <tr>
              <td>高消活跃老客</td>
              <td class="red">-300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
            </tr>
            <tr>
              <td>低消活跃老客</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
            </tr>
            <tr>
              <td>高消客户</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
            </tr>
            <tr>
              <td>低消客户</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
            </tr>
            <tr>
              <td>高消陈年客户</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
            </tr>
            <tr>
              <td>低消陈年客户</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
            </tr>
            <tr>
              <td>高消过客</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
            </tr>
            <tr>
              <td>流失用户</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
            </tr>
            <tr>
              <td>汇总</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
              <td>300</td>
            </tr>
          </table>
      </div>

      <div class="pure-table pure-table-bordered">
        <table id = 'testTable' border="1">
          <tr class="header">
              <td rowspan="2">用户类别</td>
              <td colspan="5">2019-12-01 至 2020-11-30</td>
          </tr>
          <tr class="header">
            <td>人数(人)</td>
            <td>金额(万元)</td>
            <td>客单价(元)</td>
            <td>人数同比(%)</td>
            <td>金额同比(%)</td>
          </tr>
          <tr>
            <td>高消活跃老客</td>
            <td class="red">-300</td>
            <td>300</td>
            <td>300</td>
            <td>300</td>
            <td>300</td>
          </tr>
          <tr>
            <td>低消活跃老客</td>
            <td class="red">-300</td>
            <td>300</td>
            <td>300</td>
            <td>300</td>
            <td>300</td>
          </tr>
          <tr>
            <td>高消客户</td>
            <td class="red">-300</td>
            <td>300</td>
            <td>300</td>
            <td>300</td>
            <td>300</td>
          </tr>
          <tr>
            <td>低消客户</td>
            <td class="red">-300</td>
            <td>300</td>
            <td>300</td>
            <td>300</td>
            <td>300</td>
          </tr>
          <tr>
            <td>高消陈年客户</td>
            <td class="red">-300</td>
            <td>300</td>
            <td>300</td>
            <td>300</td>
            <td>300</td>
          </tr>
          <tr>
            <td>低消陈年客户</td>
            <td class="red">-300</td>
            <td>300</td>
            <td>300</td>
            <td>300</td>
            <td>300</td>
          </tr>
          <tr>
            <td>高消过客</td>
            <td class="red">-300</td>
            <td>300</td>
            <td>300</td>
            <td>300</td>
            <td>300</td>
          </tr>
          <tr>
            <td>流失用户</td>
            <td class="red">-300</td>
            <td>300</td>
            <td>300</td>
            <td>300</td>
            <td>300</td>
          </tr>
          <tr>
            <td>汇总</td>
            <td class="red">-300</td>
            <td>300</td>
            <td>300</td>
            <td>300</td>
            <td>300</td>
          </tr>
        </table>
      </div>

      
      <script src="../js/jquery.table2excel.js"></script>
      <script type="text/javascript">
          $(function() {
            $('#mark').click(function(){
              $('.mask').show();
            })
            $('.rfm .close').click(function(){
              $('.mask').hide();
            })

            $(".btn").click(function(){
                $(".table2excel").table2excel({
                    // 不被导出的表格行的CSS class类
                      exclude: ".noExl",
                    // 导出的Excel文档的名称
                    name: "Excel Document Name",
                    // Excel文件的名称
                    filename: "哈哈哈文件名",
                    //文件后缀名
                    fileext: ".xls",
                    //是否排除导出图片
                    exclude_img: true,
                    //是否排除导出超链接
                    exclude_links: true,
                    //是否排除导出输入框中的内容
                    exclude_inputs: true
                });
            }); 

          });
      </script>
    </body>
</html>